<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #main{
            width: 1000px;
            height: 700px;
            overflow: auto;
            border: 1px solid gray;
            margin: 10px auto;
        }
        #main>ul.menu{
            width: 100%;
            height: 60px;
        }
        #main>ul.menu>li{
            width: 20%;
            height: 100%;
            border-bottom: 1px solid #cccccc;
            float: left;
            text-align: center;
            line-height: 60px;
            color: red;
        }
        #main>ol{
            width: 100%;
        }
        #main>ol>ul{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid gray;
        }
        #main>ol>ul>li{
            width: 20%;
            height: 60px;
            float: left;
            text-align: center;
            line-height: 60px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #main>ol>ul>li>a{
            color: green;
            background-color: #dddddd;
            text-decoration: none;
        }
    #select{
        width: 100%;
        height: 40px;
    }
        #select>input:nth-child(1){
            width: 50%;
            height: 40px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            float: left;
            margin-left: 20%;
        }
        #select>input:nth-child(2){
            width: 10%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            float: left;
        }


    </style>
</head>
<body>
    <div id="main">
        <div id="select">
            <input id="Val" type="text" placeholder="输入关键词(歌名,专辑或歌手,支持简拼)">
            <input id="Go" type="button" value="搜索">
        </div>
        <ul class="menu">
            <li>专辑名称</li>
            <li>歌曲标题</li>
            <li>歌手名称</li>
            <li>试听地址</li>
            <li>歌词地址</li>
        </ul>
        <ol class="list">

        </ol>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    window.onload=function () {
        var List = document.getElementsByClassName('list')[0];
        var Val=document.getElementById('Val');
        Go.onclick=function () {
            List.innerHTML="";
            var val=Val.value;


            function formatterDateTime() {
                var date = new Date()
                var month = date.getMonth() + 1
                var datetime = date.getFullYear()
                    + ""// "年"
                    + (month >= 10 ? month : "0" + month)
                    + ""// "月"
                    + (date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate())
                    + ""
                    + (date.getHours() < 10 ? "0" + date.getHours() : date
                        .getHours())
                    + ""
                    + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
                        .getMinutes())
                    + ""
                    + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
                        .getSeconds());
                return datetime;
            }

            $.ajax({
                type: 'post',
                url: 'http://route.showapi.com/928-3',
                dataType: 'json',
                data: {
                    "showapi_timestamp": formatterDateTime(),
                    "showapi_appid": '67695', //这里需要改成自己的appid
                    "showapi_sign": '49495bb2af264a45a65b4d76a508e3a5',  //这里需要改成自己的应用的密钥secret
                    "q": val

                },

                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert("操作失败!");
                },
                success: function (result) {
                    var data = result.showapi_res_body.pagebean.contentlist;
                    //console.log(data)
                    var allli = document.createDocumentFragment();
                    for (var i = 0; i < data.length; i++) {
                        var oul = document.createElement('ul');
                        oul.innerHTML = '<li>' + data[i].album_name + '</li>' +
                            '<li>' + data[i].title + '</li>' +
                            '<li>' + data[i].singer_name + '</li>' +
                            '<li><a href="' + data[i].link + '">前往试听</a></li>' +
                            '<li><a href=" ' + data[i].word_url + '">前往查看歌词</a></li>';
                        allli.appendChild(oul);
                    }
                    List.appendChild(allli);

                }
            });
        }
    }
</script>
</html>